<template>
  <div>
    <div class="form_wrap">
      <el-form label-width="120px" :rules="rules" ref="addForm" :model="addForm">
        <el-form-item label="姓名" prop="username">
            <el-input v-model="addForm.username"></el-input>
        </el-form-item>
          <el-form-item label="工号" >
           <el-input disabled  v-model="addForm.workNumber"></el-input>
        </el-form-item>
            <el-form-item label="手机号" prop="mobile">
            <el-input v-model="addForm.mobile"></el-input>
         </el-form-item>
          <el-form-item label="部门" prop="departmentId">
                <el-cascader
                  :props="caseProp"
                  size="medium"
                  v-model="addForm.departmentId" 
                  :options="options"
                  @change="handleChange"></el-cascader>
         </el-form-item>
          <el-form-item label="聘用形式" prop="formOfEmployment">
              <el-select v-model="addForm.formOfEmployment" placeholder="请选择">
                <el-option v-for="item in formOfEmployment" :label="item.name" :value="item.id">

                </el-option>
              </el-select>
         </el-form-item>
         <el-form-item label="入职时间" prop="timeOfEntry">
               <el-date-picker
                  v-model="addForm.timeOfEntry"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
         </el-form-item>
          <el-form-item label="转正时间" prop="correctionTime">
               <el-date-picker
                    v-model="addForm.correctionTime"
                  type="date"
                  placeholder="选择日期">
               </el-date-picker>
         </el-form-item>
           <el-form-item label="用户头像">
              <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              >
              <!-- 缩略图 -->
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <!-- +图标 -->
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
         </el-form-item>
         <el-form-item>
          <el-button type="primary" @click="toSave">保存更新</el-button>
         </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {getDepartmentApi,addUserApi,getUserInfo,updateEmployee} from '@/api/personnel'
import {treeData} from '@/utils/tool'
export default {
  name: 'EmployeeDepart',

  data() {
    return {
      editId:"",//编辑id
      imageUrl:"",
      addForm:{ //添加需要的所有参数
        correctionTime: "" ,//转正时间 "2024-11-29T16:00:00.000Z"
         timeOfEntry:"",// 入职时间  2024-09-10
         departmentId:'',// 部门id 通过级联选择器 获取到数据
         formOfEmployment: 1, //聘用形式   1 2
          mobile: "" ,//手机号
         username:"",//用户名

         workNumber:"",// 工号 默认传空
         staffPhoto: "",//头像 默认传空
      },
      rules:{
          username:[{required:true,message:"请输入用户名",trigger:"blur"}],
          mobile:[
            {required:true,message:"请输入用户名",trigger:"blur"},{pattern:/^1[3-9]\d{9}$/,message:"手机号格式不正确",trigger:"blur"}
          ],
          departmentId:[{required:true,message:"部门必选",trigger:"blur"}],
          timeOfEntry:[{required:true,message:"入职时间必填",trigger:"blur"}],
          correctionTime:{
            validator: (rule, value, callback) => {
                // value--当前转正时间的值
                // this.addForm.timeOfEntry--入职时间
                if(new Date(value).getTime()<new Date(this.addForm.timeOfEntry).getTime()){
                  callback(new Error("转正时间不能早于入职时间"))
                }else{
                  callback()
                }

            }
          }
      },
      caseProp:{
        label:"name",
        value:"id",
        children:"children"
      },
      value1:"",
      value:[],
      formOfEmployment:[
        {id:1,name:"正式"},
        {id:2,name:"非正式"}
      ],
       options: []//级联选择器的数据
    };
  },
  created(){
    this.getDepart();
    // 判断当前是否有 人员id 如果有 调用详情接口 做回显
    if(this.$route.query.id){ 
        this.editId=this.$route.query.id
        getUserInfo(this.editId).then(res=>{
            console.log(res,'---------详情数据--------')
            this.addForm=res.data;   //回显操作            
        })  
    }
  },
  mounted() {
    
  },

  methods: {
   async  getDepart(){ //获取级联选择器 需要的部门数据
      let res=await getDepartmentApi()
      this.options=treeData(res.data)
      console.log(this.options,"--------")
    },
   async  toSave(){ //调用添加接口
     
      // 部门id
      this.addForm.departmentId=this.addForm.departmentId.pop()
    
      // 处理 转正时间
      this.addForm.correctionTime=new Date(this.addForm.correctionTime).toISOString()
       console.log(this.addForm,"收集数据");
      this.$refs.addForm.validate(async (vali)=>{
          if(vali){
            if(this.editId){ 
                this.addForm.id=this.editId;//编辑的时候 需要传id
                let editRes=await updateEmployee(this.addForm)
                if(editRes.success){
                     this.$message.success("编辑成功")
                }
             
           }else{
              let res=await addUserApi(this.addForm)
              console.log(res,"----添加成功")
                this.$message.success("添加成功")
          }
        }
    })
      this.$refs.addForm.resetFields();//重置表单
      this.$router.push({
        name:"employeeHome"
      })
    },
    handleAvatarSuccess(){ //上传成功的回调

    },
    handleChange(){}
  },
};
</script>
<style lang="scss">
    .form_wrap{
      width: 500px;
      margin-left:50px;
      margin-top: 50px;
    }
      .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>